<template>
  <div>
    <input type="text" v-model="ming">名字<br>
    <input type="text" v-model="tu">图片<br>
    <input type="text" v-model="ge">价格<br>
    <button @click="tian">添加购物车</button>
    <table border="1" class="ju">
         
      <thead>
         <tr>
            <th>id</th>
            <th>名子</th>
            <th>图片</th>
            <th>价格</th>
            <th>商品</th>
            <th>操作</th>
         </tr>
      </thead>
      <tbody>
        <tr v-for="item in arr"  :key="item.id">
            <td>{{ item.id }}</td>
            <td>{{ item.name }}</td>
            <td><img :src="item.url" alt=""></td>
            <td>{{ item.price * item.num}}</td>
            <td><button @click="jia(item)" >加</button>
            <span>{{ item.num }}</span>
            <button @click="jian(item)">减</button></td>
            <td><button @click="shan(item.id)">删除</button><button>加入购物车</button></td>
        </tr>
      </tbody>
    </table>
  <h1 class="gou">购物车</h1>
  </div>
</template>

<script>


export default {
  data() {
    return {
        ming:'',
        tu:'',
        ge:'',
       arr_gu:['空调','洗衣机','水果','马桶'],
       arr:[{
          id:0,
          name:'空调',
          url:'https://pic.rmb.bdstatic.com/bjh/241205/dump/bc78176045036df8ff55f177b51f8c52.png',
          price:1599,
          num:1,
          is:false
       },{
          id:1,
          name:'洗衣机',
          url:'https://img0.baidu.com/it/u=2642351825,1807041009&fm=253&app=138&f=JPEG?w=760&h=760',
          price:2299,  
          num:1,
          is:false
       },{
          id:2,
          name:'西瓜',
          url:'https://img1.aiyouyi.cn/web-file/1676753415218495505/image/3853e/2088877856ac4e318e11a3459f6145c9.jpg',
          price:1599,
          num:1  ,
          is:false
       },{
          id:3,
          name:'马桶',
          url:'https://qcloud.dpfile.com/pc/tyogXN-QCa_5wj93HA3fBq-4aSHRYID9iy1-a88E_CFFv4sxV7lda77-V7oOm3Rb.jpg',
          price:1599,  
          num:1,
          is:false
       },]
    };
  },
  mounted() {

  },
  methods: {
        shan(i){
         var a=this.arr.find(item=>item.id==i)
         this.arr.splice(a,1)
        },
        jia(i){
          i.num++
        },
        jian(i){
         if(i.num>1){
           i.num--
          }
        },
        tian(){
          this.arr.push({
            
            id: this.arr.length,
            name:this.ming,
            url:this.tu,
            price:this.ge,
            num:1
          })
        },
     
      
        
  },
};
</script>
<style lang='less' scoped>
img{
    width: 50px;
    height: 50px;
}
.ju{
    margin:auto;
    width: 500px;
    height: 500px;
}
.gou{
margin-left: 460px; ;
}
.tap{
margin: auto;
}

</style>